<template>
  <div class="OrganizationPage">
    <div class="left-list">
      <el-card>
        <el-tree
          icon-class=" "
          :data="treeData"
          node-key="id"
          :default-checked-keys="['1024985257948084801']"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :highlight-current="true"
          :default-expanded-keys="defaultKeys"
        >
          <span slot-scope="{ node, data }">
            <template>
              <i
                :class="{
                  'el-icon-folder-add': !node.expanded && data.type !== 3,
                  'el-icon-folder-remove': node.expanded && data.type !== 3,
                  'el-icon-circle-plus-outline':
                    !node.expanded && data.type === 2,
                  'el-icon-remove-outline': node.expanded && data.type === 2,
                }"
                style="color: #419eff"
              />

              <span>{{ node.label }}</span>
            </template>
          </span>
        </el-tree>
      </el-card>
    </div>
    <div class="right-list">
      <el-card class="top">
        <!--        <div #header>-->
        <!--          <span>11</span>-->
        <!--        </div>-->
        <div slot="header" class="clearfix">
          <span style="font-weight: bold; font-size: 16px">机构信息</span>
        </div>
        <div>
          <el-form :label-position="labelPosition" :model="formData">
            <el-row type="flex" justify="space-between">
              <el-form-item label="机构编号" label-width="90px" prop="id">
                <el-input :disabled="true" v-model="formData.id"></el-input>
              </el-form-item>
              <el-form-item label="机构名称" label-width="90px" prop="name">
                <el-input :disabled="true" v-model="formData.name"></el-input>
              </el-form-item>
              <el-form-item label="机构类型" label-width="90px" prop="type">
                <el-select v-model="formData.type" :disabled="true">
                  <el-option label="区域一" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row type="flex">
              <el-form-item
                label="机构地址"
                label-width="90px"
                style="width: 100%"
                prop="province"
              >
                <el-select
                  v-model="formData.province.name"
                  style="width: 33.33%"
                  :disabled="isDisabled"
                  @change="provinceChange"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>

                <el-select
                  placeholder="请选择市"
                  v-model="formData.city.name"
                  style="width: 33.33%"
                  :disabled="isDisabled"
                  @change="cityChange"
                >
                  <el-option
                    v-for="item in cityOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>

                <el-select
                  placeholder="请选择县/区"
                  v-model="formData.county.name"
                  style="width: 33.33%"
                  :disabled="isCountyDisabled"
                >
                  <el-option
                    v-for="item in countyOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-form-item label="详细地址" label-width="90px" prop="address">
                <el-input
                  v-model="formData.address"
                  :disabled="isDisabled"
                ></el-input>
              </el-form-item>
              <el-form-item label="经度" label-width="90px" prop="longitude">
                <el-input :disabled="true" v-model="formData.longitude">
                  <template #suffix>
                    <span style="color: black; margin-right: 10px">E</span>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="纬度" label-width="90px" prop="latitude">
                <el-input :disabled="true" v-model="formData.latitude">
                  <template #suffix>
                    <span style="color: black; margin-right: 10px">N</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="left">
              <el-form-item
                label="机构负责人"
                label-width="90px"
                prop="managerName"
              >
                <el-input
                  v-model="formData.managerName"
                  :disabled="isDisabled"
                ></el-input>
              </el-form-item>
              <el-form-item label="机构电话" label-width="90px" prop="phone">
                <el-input
                  v-model="formData.phone"
                  :disabled="isDisabled"
                ></el-input>
              </el-form-item>
            </el-row>
            <el-form-item size="large">
              <el-row type="flex" justify="center">
                <el-button type="primary" style="width: 89px" @click="editFn">{{
                  editName
                }}</el-button>
              </el-row>
            </el-form-item>
          </el-form>
          <!--          <el-row type="flex" justify="center">-->
          <!--            <el-button type="primary" style="width: 89px" @click="editFn"-->
          <!--              >编辑</el-button-->
          <!--            >-->
          <!--          </el-row>-->
        </div>
      </el-card>
      <el-card class="bottom">
        <!--        <div #header>-->
        <!--          <span>11</span>-->
        <!--        </div>-->
        <div slot="header" class="clearfix">
          <span style="font-weight: bold; font-size: 16px">员工信息</span>
        </div>
        <div>
          <el-table
            :data="employeeList"
            stripe
            style="width: 100%; border: 1px solid #ebeef5"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column prop="userId" label="员工编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="员工姓名"> </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="130">
            </el-table-column>
            <el-table-column prop="agency.name" label="所属机构" width="130">
            </el-table-column>
            <el-table-column prop="account" label="系统账号" width="100">
            </el-table-column>
            <el-table-column prop="stationName" label="系统角色">
            </el-table-column>
            <el-table-column prop="status" label="账号状态">
              <template #default="{ row }">
                <div
                  v-if="row.status === 1"
                  style="
                    display: inline-block;
                    background-color: #1dc779;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                  "
                ></div>
                {{ row.status === 1 ? "正常" : "非正常" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-row type="flex" justify="center" style="margin-top: 15px">
          <el-pagination
            v-if="+total > 5"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getAddressListApi,
  getEmployeeListApi,
  getOrganizationDetailsApi,
  getTreeListApi,
} from "@/api/organization-manage";
const typeMap = { 1: "一级转运中心", 2: "二级转运中心", 3: "营业部" };
export default {
  name: "OrganizationPage",
  data() {
    return {
      editName: "编辑",
      isDisabled: true,
      isCountyDisabled: true,
      employeeList: [],
      total: 0,
      treeData: [],
      formData: {
        province: "",
        city: {},
        county: "",
      },
      tableData: [],
      defaultKeys: ["1024984540818568481"],
      labelPosition: "right",
      defaultProps: {
        label: "name",
        children: "children",
      },
      params: {
        agencyId: "1024985129287809409",
        page: 1,
        pageSize: 5,
      },
      options: [],
      cityOptions: [],
      countyOptions: [],
    };
  },
  created() {
    this.getTreeList();
    this.getEmployeeList();
    this.getInfo();
  },
  methods: {
    async cityChange(value) {
      console.log(value);
      const res = await getAddressListApi({
        parentId: value,
      });
      console.log(res);
      this.countyOptions = res.data;
      this.isCountyDisabled = !this.isCountyDisabled;
    },
    async provinceChange(value) {
      // 此处必须重置为空对象
      this.formData.city = {};
      this.formData.county = {};
      this.isCountyDisabled = !this.isCountyDisabled;
      // console.log(value);
      const res = await getAddressListApi({
        parentId: value,
      });
      // console.log(res);
      this.cityOptions = res.data;
    },
    async editFn() {
      this.isDisabled = !this.isDisabled;
      this.isCountyDisabled = !this.isCountyDisabled;
      const res = await getAddressListApi();
      console.log(res);
      this.options = res.data;
      this.editName = this.editName === "编辑" ? "保存" : "编辑";
    },
    async handleNodeClick(data, node) {
      console.log(data);
      console.log(node);
      this.params.agencyId = data.id;
      this.getEmployeeList();
      try {
        const res = await getOrganizationDetailsApi(this.params.agencyId);
        console.log(res);
        this.formData = res.data;
        this.formData.type = typeMap[this.formData.type];
        // console.log(this.formData);
      } catch (err) {
        console.log(err);
        this.$message.error("获取机构信息失败");
      }
    },
    // 默认渲染某个机构信息
    async getInfo() {
      const res = await getOrganizationDetailsApi(this.params.agencyId);
      console.log(res);
      this.formData = res.data;
      this.formData.type = typeMap[this.formData.type];
    },
    async getEmployeeList() {
      const res = await getEmployeeListApi(this.params);
      // console.log(res);
      this.employeeList = res.data.items;
      // console.log(this.employeeList);
      // console.log(res.data);
      this.total = res.data.counts;
      // console.log(this.total);
    },
    async getTreeList() {
      const { data: res } = await getTreeListApi();
      // console.log(res);
      this.treeData = JSON.parse(res);
      console.log(this.treeData);
    },
    handleSizeChange(value) {
      this.params.pageSize = value;
      this.getEmployeeList();
    },
    handleCurrentChange(value) {
      this.params.page = value;
      this.getEmployeeList();
    },
  },
};
</script>

<style lang="scss" scoped>
.OrganizationPage {
  display: flex;
  .left-list {
    width: 205px;
    height: auto;
    margin-right: 20px;
    //设置这个属性不会被挤压
    flex-shrink: 0;
    ::v-deep .el-card__body {
      height: 720px;
      background-color: white;
      .el-tree {
        .el-tree-node__content {
          margin-bottom: 10px;
        }
        //height: 100vh;
        .is-current {
          background: unset;
          color: #ff7a63;
        }
      }
    }
  }
  .right-list {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    //background-color: skyblue;
    ::v-deep .el-card__header {
      background-color: #fafafa;
    }
    .top {
      margin-bottom: 20px;
    }
    ::v-deep .el-form-item__label {
      font-size: 14px;
      font-weight: 700;
      color: #20232a;
    }
  }
}
</style>
